<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/admin/notices'}">首页管理</el-breadcrumb-item>
      <el-breadcrumb-item>公告管理</el-breadcrumb-item>
      <el-breadcrumb-item>编辑公告</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card class="card">
      <span>通知标题：</span>
      <el-input v-model="notice.title" class="title" placeholder="请输入通知标题"></el-input>
      <span>通知内容：</span>
      <mavon-editor 
        style="margin:10px 50px"
        v-model="notice.content"
        :ishljs="true" 
        :toolbars="toolbars" />
      <div style="margin:20px 45%">
        <el-button v-if="isAdd" type="primary" icon="el-icon-edit" round @click="publishNotice()">发布通知</el-button>
        <el-button v-else type="success" icon="el-icon-edit" round @click="submitEdit()">提交修改</el-button>
      </div>  
    </el-card>
  </div>
</template>

<script>
  import {getNoticeById, updateNotice, addNotice} from '../../axios/notice'  
  export default {
    name: 'AdminEditNotice', 
    data(){
      return {
        isAdd: false,
        notice:{}, // 通知内容
        noticeFormRules:{
          title: [ { required: true, message: '通知标题不能为空', trigger: 'blur' } ],
          content: [ { required: true, message: '通知具体内容不能为空', trigger: 'blur' } ]
        },
        toolbars: {
          bold: true, // 粗体  
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          mark: true, // 标记
          superscript: true, // 上角标
          quote: true, // 引用
          ol: true, // 有序列表
          ink: true, // 链接 
          help: true, // 帮助 
          subfield: false, // 是否需要分栏
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          /* 1.3.5 */
          undo: true, // 上一步
          trash: true, // 清空
          // save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          preview:true // 预览
        } 
      }
    },
    created(){
      let id = this.$route.params.id
      if(!id){ // id 为 undefined，说明此时为新建通知
        this.notice = {}
        this.isAdd = true
      }else{ // 说明此时为编辑指定 id 的通知
        this.getNoticeDetail(id)
      }
      
    },
    methods:{
      getNoticeDetail(id){ 
        // 向后端发送请求，获取通知详情
        getNoticeById(id).then(res => {
          if(res.success){
            this.notice = res.data
          } 
        })

        // 无后端，模拟数据
        // this.notice = {  
        //                 id: '1', 
        //                 title: '关于开展20XX届本科生毕业论文（设计）相似性检测工作的通知', 
        //                 publishTime: '2022-01-19 23:52:21',
        //                 updateTime: '2022-01-22 23:52:21',
        //                 content: '各学院：\n' + 
        //                             '根据《XXXX大学本科生毕业论文（设计）相似性检测实施办法》等文件精神，为做好2020届本科生毕业论文（设计）相似性检测工作，现将相关事宜通知如下：\n' + 
        //                             '    一、检测对象\n' + 
        //                             '         2020届本科生毕业论文（部分毕业设计的专业除外）。\n' + 
        //                             '     二、检测时间\n' + 
        //                             '         系统开放时间为2020年4月9日—5月13日，具体检测时间由各学院自定。\n' + 
        //                             '     三、检测程序\n' + 
        //                             '         学校使用维普论文检测系统进行毕业论文（设计）相似性检测工作。学生在XXXX大学毕业论文（设计）智能管理系统中经指导教师同意后再上传论文（设计）定稿，系统会自动进行相似性检测，并将检测结果和查重报告反馈给指导教师和学生本人，作为论文（设计）评分的重要依据。\n' + 
        //                             '     四、检测要求\n' + 
        //                             '         1.检测文稿以word文档上传。\n' + 
        //                             '         2.学生进行文档检测时，请将定稿后的毕业论文（设计）按照标题、摘要、关键词、目录、正文、参考文献、附录及致谢的顺序排版后上传。\n' + 
        //                             '         3.学生提交检测的单篇文档不得超过20M，如果文档过大，请去除文档中过大的图片；检测系统只针对文字内容进行检测，不对表格、代码、公式及图片进行检测。\n' + 
        //                             '         4.每篇毕业论文（设计）当年原则上限检1次，请确认论文定稿无误后再上传。\n' + 
        //                             '     五、检测结果的处理\n' + 
        //                             '         进行处理。检测过程中如有问题，请及时与教务处实践教学科联系。\n\n\n\n' +  
        //                             '      \t\t\t\t\t\t\t教务处 \n' + 
        //                             '      \t\t\t\t\t\t\t2020年3月30日\n' + 
        //                             '      \t\t\t\t\t\t\t联系人：黄老师 卢老师 李老师\n' + 
        //                             '      \t\t\t\t\t\t\t联系电话：23232323\n' + 
        //                             '      \t\t\t\t\t\t\t电子邮箱:XXXXXX.@abc.edu.cn \n'
        //               }
        
      },
      submitEdit(){  
        if(!this.notice.title) {
          this.$message.error('请输入通知标题')
          return
        }  
        if(!this.notice.content) {
          this.$message.error('请输入通知内容')
          return
        } 
        this.$confirm('确认提交吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => {
          // 此时发送后端请求，保存审核信息
          updateNotice(this.notice).then(res => {
            if(res.success){
              this.$message.success('修改成功!')
              this.$router.push('/admin/notices')
            } 
          })   
        }).catch(() => {
          this.$message.info('已取消提交!');  
        })
      },
      publishNotice(){
        if(!this.notice.title) {
          this.$message.error('请输入通知标题')
          return
        }  
        if(!this.notice.content) {
          this.$message.error('请输入通知内容')
          return
        } 
        this.$confirm('确认发布吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => {
          // 此时发送后端请求，保存审核信息
          addNotice(this.notice).then(res => {
            if(res.success){
              this.$message.success('发布成功!')
              this.$router.push('/admin/notices')
            } 
          })  
        }).catch(() => {
          this.$message.info('已取消发布!');   
        })  
      }
    }
  }
</script>

<style scoped>
  .el-form .el-button{
    margin-left: 35%; 
  }
  .title{
    width:92%;
    margin:10px 50px;  
  }
  .el-card span{
    margin-left:50px;
    margin-top:10px;
  }
</style>